import { useI18n } from 'vue-i18n'
import { SubMenu, MenuItem } from '@arco-design/web-vue'

import type { MenuTree } from './useMenuTree'

export function Menu({ menuTree }: { menuTree: MenuTree[] }) {
  const { t } = useI18n({ useScope: 'global' })

  return menuTree.map(({ children, name, icon, title }) => {
    return children !== undefined ? (
      <SubMenu
        key={name}
        v-slots={{
          icon: MenuIcon(icon),
          title: () => <MenuTitle title={t(title)} />
        }}
      >
        {Menu({ menuTree: children })}
      </SubMenu>
    ) : (
      <MenuItem key={name} v-slots={{ icon: MenuIcon(icon) }}>
        <MenuTitle title={t(title)} />
      </MenuItem>
    )
  })
}

function MenuTitle({ title }: { title: string }) {
  return <span class="font-600">{title}</span>
}

function MenuIcon(icon: string) {
  return () => <i class={`${icon} text-lg`} />
}
